<template>
    <div class="home-newsong">
        <h3>推荐新音乐 ></h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item, index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.picUrl" radius="10" />

                    </div>
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
  
<script>
import { betterScrollHorizontal } from "../../common/betterScroll";
export default {
    data() {
        return {
            listData: [],
        };
    },
    created() {
        this.getSongListSData();
    },
    methods: {
        getSongListSData() {
            this.$request("get", "/personalized/newsong").then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.listData = res.result;
                }
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                );
            });
        },
        selectItem(item) {
            const id = item.content_id;
            this.$router.push({ path: `/songlist/${id}` });
        },
    },
    filters: {
        numFilter(value, num) {
            return parseFloat(value / 10000).toFixed(num)
        }
    }
};
</script>
  
<style scoped>
.wrapper {
    width: 100%;
    overflow: hidden;
}

/* ul.content {
      width: calc(12 * 10rem);
  } */

ul.content>li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
    /**垂直方向的对齐方式 */
}

ul.content>li * {
    margin: 0 0.1rem;
}

.cover {
    position: relative;
}

.cover>span {
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
    background-color: burlywood;
}

.home-newsong>h3 {
    text-align: left;
    margin-left: 10px;
}
</style>